<template>
  <div class="component-container" @click="hide" :class="{ 'parent-visible': props.visible }">
    <view class="content" :class="{ visible: props.visible }" @click.prevent="() => {}">
      <view class="header">
        <span class="cart-title">购物车列表</span>
        <span class="clear-cart" @click="clearCart"><uni-icons type="trash" size="15"></uni-icons>清空购物车</span>
      </view>
      <view class="content-rol" :style="{ paddingBottom: props.bottomSafeArea }">
        <view v-for="(cartItem, index) in props.data" :key="index" class="specifications">
          <view class="image-box">
            <image :src="dishMap![cartItem.id]?.image" class="image" />
          </view>
          <view class="info">
            <view class="name">
              {{ dishMap![cartItem.id]?.name }}
            </view>
            <view class="specifications-desc"> 规格: {{ CartItem.genSpecificationsDesc(cartItem.flavors) }} </view>
            <view class="price-and-count">
              <span class="price">￥{{ cartItem.price }}</span>
              <view class="count-control">
                <span class="count-button down" @click="specificationsCountPlusOrDown(cartItem, -1)">-</span>
                <span class="count">{{ cartItem.count }}</span>
                <span class="count-button plus" @click="specificationsCountPlusOrDown(cartItem, 1)">+</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { CartItem } from '@/types/entity/ShoppingCart'
import $store from '@/store'
import $API from '@/api'
import type Dish from '@/types/entity/Dish'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object as () => CartItem[],
    default: [] as CartItem[]
  },
  bottomSafeArea: {
    type: String,
    default: '0px'
  }
})
const { shopId, seatNumber, inviteCode } = $store.shop

// 加1或减1
function specificationsCountPlusOrDown(cartItem: CartItem, increment: number) {
  const copyCartItem = JSON.parse(JSON.stringify(cartItem))
  copyCartItem.count = increment
  $store.cart.specificationsCountPlusOrDownEvent.emit(copyCartItem)
}

const emits = defineEmits<(e: 'update:visible', newVisible: boolean) => void>()
function hide() {
  emits('update:visible', false)
}

// 当点击 清空购物车时
async function clearCart() {
  if (shopId.getValue() == null) return
  const result = await $API.shoppingCart.clear({
    shopId: shopId.getValue()!,
    seatNumber: seatNumber.getValue(),
    inviteCode: inviteCode.getValue()
  })
  if (!result.success) return
  // 触发刷新购物车事件
  $store.cart.shoppingCartRefreshEvent.emit()
}
// let dishMap = ref<{ [key: string]: Dish } | undefined>({})
// onBeforeMount(async () => {
//   // 获取祖父组件共享的数据
//   dishMap.value = await inject<Promise<{ [key: string]: Dish }>>('dishMap')
//   console.log('==>', dishMap.value, props.data)
// })
// 从父组件向下共享的数据注入店铺菜品信息
const dishMap = inject<{ [key: string]: Dish }>('dishMap')
</script>

<style scoped lang="scss">
.parent-visible {
  height: 100vh !important;
}

.component-container::after {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 30px;
  background: linear-gradient(to top, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
  content: '';
}

.component-container {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 0;
  background: #5353536e;

  .visible {
    // padding: 30rpx 30rpx 0rpx !important;

    height: 50vh !important;
    box-sizing: border-box;
    border-top-left-radius: 30rpx !important;
    border-top-right-radius: 30rpx !important;
  }

  .content {
    $header-height: 65rpx;
    $base-padding-size: 40rpx;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    height: 0;
    border-top: 1px solid #d2d0c6;
    background-color: #fff;
    transition: all 0.5s;
    box-sizing: border-box;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 $header-height 0 $base-padding-size;
      width: 100%;
      height: $header-height;
      font-size: 30rpx;
      line-height: $header-height;
      box-sizing: border-box;
      border-bottom: 1px solid rgb(238 238 238);

      .cart-title {
        font-weight: 700;
        color: rgb(88 88 88);
      }

      .clear-cart {
        font-size: 25rpx;
        color: rgb(118 118 118);
      }
    }

    .content-rol::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .content-rol {
      position: absolute;
      top: $header-height;
      bottom: 0;
      overflow-y: auto;
      padding: 20rpx $base-padding-size;
      width: 100%;
      box-sizing: border-box;

      .specifications {
        display: flex;
        justify-content: space-between;
        inset: $header-height 0 0 0;
        padding-bottom: 20rpx;

        .image-box {
          overflow: hidden;
          margin-right: 20rpx;
          width: 130rpx;
          height: 130rpx;
          border-radius: 10rpx;

          .image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            height: 50rpx;
            font-size: 35rpx;
            font-weight: 700;
            line-height: 50rpx;
          }

          .specifications-desc {
            font-size: 27rpx;
          }

          .price-and-count {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40rpx;
            line-height: 40rpx;

            .price {
              font-weight: 700;
              color: #f54a26;
            }

            .count-control {
              .count-button {
                display: inline-block;
                width: 45rpx;
                height: 45rpx;
                font-weight: 700;
                border-radius: 50%;
                text-align: center;
                line-height: 45rpx;
              }

              .down {
                background-color: #f0f0f0;
              }

              .count {
                display: inline-block;
                padding: 0 20rpx;
                min-width: 40rpx;
                text-align: center;
              }

              .plus {
                background-color: #f9d450;
              }
            }
          }
        }
      }
    }
  }
}
</style>
